import React, { Component } from 'react'
import { Tree } from 'antd'

const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: (
              <span
                style={{
                  color: '#1890ff',
                }}
              >
                sss
              </span>
            ),
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
]
class TreeList extends Component {
  render() {
    return (
      <div>
        <Tree
          defaultExpandedKeys={['0-0-0', '0-0-1']}
          defaultSelectedKeys={['0-0-0', '0-0-1']}
          defaultCheckedKeys={['0-0-0', '0-0-1']}
          treeData={treeData}
          draggable
          onDragStart={({ event, node }) => {
            event.dataTransfer.setData('node', JSON.stringify(node))
          }}
        />
        <div
          onDrop={(e) => {
            console.log(e.dataTransfer.getData('node'))
          }}
          onDragOver={(event) => {
            event.preventDefault()
          }}
          style={{ width: 500, height: 500, background: 'red' }}
        ></div>
      </div>
    )
  }
}

export default TreeList
